<template>
    <div>
        <header>
            <a href="javascript:;" class="left">
                <i class="iconfont icon-up21" @click="jump"></i>
            </a>
            <p>收货地址管理</p>
            <a href="javascript:;" class="right">
                <i class="iconfont icon-kefu1"></i>
            </a>
        </header>
        <div class="main">
            <van-address-edit
                :area-list="areaList"
                show-postal
                show-delete
                show-set-default
                show-search-result
                :search-result="searchResult"
                :area-columns-placeholder="['请选择', '请选择', '请选择']"
                save-button-text="确认提交"
                @save="onSave"
                @delete="onDelete"
                :address-info="addressInfo"
            />
        </div>
    </div>
</template>

<script>

    import Vue from 'vue';
    import { AddressEdit } from 'vant';
    import { areaList } from '@vant/area-data';
    Vue.use(AddressEdit,areaList);
    
export default {
    data() {
        return {
        areaList,
        searchResult: [],
        addressInfo:{
            id:'0',
            name:'小林',	
            tel:'18184489540',
            province:'',	
            city:'',	
            county:'',	
            addressDetail:'',	
            areaCode:'',	
            postalCode:'',
            isDefault:'',
        },
        idx:0,
        }
    },
    created () {
       this.idx= this.$route.query.index
       this.addressInfo = this.$route.query.item
       console.log(this.idx,this.addressInfo);
    },
    methods: {
        jump() {
            this.$router.push("/addresslist");
        },
        onSave(content) {
            let idx = this.idx
            content.address = content.province + content.city + content.county + content.addressDetail
            this.$store.commit('address/addressAddMut',{content,idx})
            this.$router.push({
                path:'/addresslist'
            })
            content.id = Math.random()
        },
        onDelete(content) {
            let idx = this.idx
            let i = -2
            this.$router.push('/addresslist')
            this.$store.commit('address/addressAddMut',{content,idx,i})
        },
    },
};
</script>

<style src="../assets/font/iconfont.css" scoped></style>
<style lang="less" scoped>
    header{
        width: 375px;
        height:50px;
        background-color: #00bf9d;
        position: fixed;
        top: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 1000;
    }
    header .left{
        width: 30px;
        height: 33px;
        line-height: 33px;
        padding-left: 10px; 
    }
    header .left .iconfont{
        font-size: 16px;
        color: #fff;
        font-weight: bold;
        margin: 0 0 0 10px !important;
    }
    header p{
        width: 260px;
        height: 34px;
        text-align: center;
        line-height: 34px;
        font-size: 22px;
        color: #fff;
        margin: 0 10px;
    }
    header .right{
        width: 40px;
        height: 40px;
        font-size: 26px;
        text-align: left;
        line-height: 40px;
        margin-right: 10px;
        /* float: left; */
    }
    header .right .iconfont{
        font-size: 35px;
        color: #fff;
        margin: 0 10px 0 0 !important;
    }
    .main{
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-x: hidden;
        overflow-y: scroll;
        margin: auto;
        background: #f5f5f5;
    }
</style>